<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-10 16:10:23
-->
<template>
    <div class="middlebox">
        <div class="duty-box">
            <div class="duty-left">
                <div class="duty-top">
                    <el-image :src="require('../../assets/img/dashboard/头像-背景.png')" fit="fit"/>
                </div>
                <div class="duty-bottom">
                    <div>
                        <span class="text-ty">责任人:</span>{{data != null && data.manageName?data.manageName:'暂无'}}
                    </div>
                    <div>
                        <span class="text-ty">电话:</span>{{data != null && data.managePhone?data.managePhone:'--'}}
                    </div>
                    <div>
                        <span class="text-ty">值班人员:</span>{{data != null && data.patrolName?data.patrolName:'--'}} <span :style="{'color':isonline ==1 ? '#00FF4E':''}">(在线)</span>
                    </div>
                    <div>
                        <span class="text-ty">电话:</span>{{data != null && data.patrolPhone?data.patrolPhone:'--'}}
                    </div>
                </div>
            </div>
            <div class="duty-right">
                <h1 class="h1-ty">
                    <el-image class="img-ty" :src="require('../../assets/img/dashboard/责任目标-背景.png')" fit="fit"/>责任目标
                </h1>
                <div class="title-txt" v-html="data != null && data.patrolDuty?data.patrolDuty:'暂无'"/>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => null
        }
    },
    data() {
        return {
            isonline:1,
        }
    },
    watch: {
        data: {
            handler(val) {

            },
            deep:true
        }
    },
    mounted() {
    },
    unmounted() {

    },
    methods: {
       
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .duty-box {
        display: flex;
        width: 100%;
        padding: 40px 0 20px;
        box-sizing: border-box;
        height: 100%;
        color: #FFFFFF;
        .duty-left {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            width: 200px;
            box-sizing: border-box;
            .duty-top {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .duty-bottom {
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                >div {
                    margin-bottom: 10px;
                    letter-spacing: 2px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    .text-ty {
                        color: #00FFFF;
                    }
                }
                >div:last-child {
                    margin-bottom: 0px;
                }
                
            }
        }
        .duty-right {
            display: flex;
            flex: 1;
            margin-left: 35px;
            flex-flow: column;
            .h1-ty {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                letter-spacing: 2px;
                margin-bottom: 20px;
                font-weight: bold;
                color: #FF7E00;
                .img-ty {
                    margin-right: 5px;
                }
            }
            .title-txt {
                font-size: 14px;
                text-indent:30px;
                line-height: 26px;
                overflow-y: auto;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-line-clamp: 6;
                // -webkit-box-orient: vertical;
            }
            .title-txt::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
</style>